<template>
    <div class="warapper">
        <div style="width:120px;height:120px;" class="firstCircular" @click="menu">
            <text class="text">{{menuText}}</text>
        </div>
        <div  v-show="showSubMenu"  class="label">
            <input
               ref="inputs"
               class="input"
               type="text"
               autofocus="false"
               return-key-type="go"
               placeholder="输入跳转标签名称"
               @change="goTo">
            </input>
        </div>
    </div>
</template>
<script>
import { toast } from "../utils/config";
const animation = weex.requireModule("animation");
export default {
  props: {},
  data: function() {
    return {
      menuText: "菜单",
      showSubMenu: false
    };
  },
  methods: {
    menu: function() {
      let self = this;
      let el = self.$refs.inputs;
      if (!self.showSubMenu) {
        animation.transition(
          el,
          {
            styles: {
              transform: "translateX(300px)"
            },
            duration: 800,
            timingFunction: "ease-out",
            needLayout: false,
            delay: 0
          },
          function() {
            self.showSubMenu = true;
            toast(self.showSubMenu);
          }
        );
      } else {
        animation.transition(
          el,
          {
            styles: {},
            duration: 300,
            timingFunction: "ease-out",
            needLayout: false,
            delay: 0
          },
          function() {
            self.showSubMenu = false;
            toast(self.showSubMenu);
          }
        );
      }
    },
    goTo: function(value) {
      let self = this;
      self.$emit("jump", value.value);
    }
  }
};
</script>
<style>
.warapper {
  position: fixed;
  bottom: 120px;
  right: 30px;
  direction: ltr;
  flex-direction: row-reverse;
  align-items: center;
}
.firstCircular {
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  border-width: 2px;
  border-style: solid;
  border-color: #41b883;
  background-color: #3eaf7c;
}

.text {
  font-size: 25px;
  color: #fff;
  font-weight: bold;
}
.label {
  justify-content: center;
  align-items: center;
}
.input {
  width: 290px;
  height: 60px;
  border-width: 2px;
  border-color: #41b883;
  border-style: solid;
  background-color: aliceblue;
  margin-right: 10px;
  padding: 10px;
  font-size: 30px;
}
</style>